@import "../lesshat/3.0.2/lesshat";

@import "_import/_variable";
@import "_import/_mixin";
@import "_import/_btn";
@import "_import/_table";
@import "_import/_panel";
@import "_import/_alert";
@import "_import/_faketable";
@import "_import/_thumbnail";

@import "_module/_sandbox";
@import "_module/_project";
@import "_module/_backyard_docer";


.elu {
    background:#f3f3f3;
    color:#333 !important;
    font-size:14px;
    line-height: 1.42857143;
    position:relative;

    @sidebarOpenWidth: 180 + @topbar-brand-paddingVertical + @topbar-paddingLeft;
    @media (min-width: 991px) {
        padding-left: @sidebarOpenWidth;
        .elu-sidebar {
            margin-left:0 !important;
        }
    }

    .elu-sidebar {
        .size(@sidebarOpenWidth, 100%);
        background:#30426a;
        margin-left:-150px;
        position: fixed;
        left:0;
        z-index:999;

        .sidebar {
            padding:15px 0 0 0;
            margin:0;
            li {
                list-style:none;
            }
            .sidebar_list a,
            .sidebar_title {
                text-indent:16px;
            }
            .sidebar_list {
                height: 40px;
                a {
                    width: @sidebarOpenWidth;
                    font-size: 15px;
                    color: #b2bfdc;
                    line-height: 40px;
                    display: block;
                    float: left;
                    text-decoration: none;
                    &:hover {
                        color: #fff;
                        border-left: 3px solid #e99d1a;
                        background: #2d3e63;
                        .glyphicon {
                            text-indent: 16px;
                        }
                    }
                }
                .glyphicon {
                    float: right;
                    padding-right: 29px;
                    line-height: 40px;
                    width: 52px;
                }
            }
        }
        .sidebar_title {
            .transition-simple();
            background:#2d3e63;
            color: #738bc0;
            font-size: 12px;
            .brand {
                display:inline-block;
                padding: 15px;
                vertical-align:middle;
                font-size: 24px;
                line-height: 24px;

                @media (max-width: 990px) {
                    float:right;
                    padding-right:10px;
                }

                &:hover {
                    text-decoration:none;
                }
            }
            .brandSub {
                font-size:14px;
                padding-left:0;
                color:#fff;
                display:inline-block;
                line-height:24px;

                @media (max-width: 990px) {
                    display: none;
                }
            }
        }
        .sidebar-footer {
            .size(100%, 40px);
            .transition-simple();
            position:absolute;
            background:#2d3e63;
            bottom:0;
            text-align:center;
            a {
                color:#b2bfdc;
                font-size:12px;
                line-height:40px;
            }
            .sidebarRoot {
                padding-right:5px;
            }
        }
    }

    .elu-wrapper {
        .size(100%);
        .transition-simple();
        margin-left: -@sidebarWidth;
        padding-left: @sidebarWidth;
        position:absolute;
        padding-top: @topbar-height;

        .elu-topbar {
            left: @sidebarWidth;
            border: 0;
            background:#2494f2;
            color:#fff;
            padding-right:25px;
            min-height: @topbar-height;

            @media (max-width: 990px) {
                left: @sidebarSlimWidth;
            }

            &.navbar-default {
                .navbar-toggle {
                    .box-shadow(1px 1px 0 rgba(255, 255, 255, 0.2) inset);
                    outline: none;
                    border: 1px solid rgba(0, 0, 0, 0.15);
                    padding: 4px 8px;
                    margin-top:0px;
                    margin-bottom:0px;
                }
                .navbar-brand {
                    .size(205px, @topbar-height);
                    .transition-simple();
                    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
                    padding-left: 35px;
                    padding:0px @topbar-brand-paddingVertical;
                    text-align: left;
                    color: #fff;
                    font-weight: 300;
                    font-size: 19px;
                    line-height: @topbar-height;

                    @media (max-width: 990px) {
                        width: 55px;
                    }
                }
                .navbar-nav {
                    > li {
                        > .dropdown-menu {
                            margin-top:0;
                        }
                        > a {
                            padding-top: 0;
                            padding-bottom: 0;
                            height: @topbar-height;
                            line-height: @topbar-height;
                            font-size: 13px;
                            color: #fff;
                            &:hover {
                                color: #eee;
                                background: #36a3ff;
                            }
                        }
                    }
                    > .active,
                    > .open {
                        > a {
                            background:#36a3ff;
                            color:#fff;
                        }
                    }
                }
                .dropdown-menu {
                    > li,
                    li {
                        > a {
                            font-size:13px;
                            padding:2px 20px;
                            clear:both;
                            color:#333;
                            display:block;
                            white-space:nowrap;
                            &:hover,
                            &:focus {
                                background:#2391ed;
                                color:#fff;
                            }
                        }
                    }
                }
            }
        }

        .elu-content {
            .size(100%, auto);
            padding-left:0;
            margin-left:0;
            padding-top:15px;
            margin-bottom:15px;

            @media (max-width: 990px) {
                padding-left: @sidebarSlimWidth;
                position:absolute;
            }

            .row {
                margin-left:0;
                margin-right:0;
            }
        }
    }
}
